<template>
	<view class="container bottom-ios">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333333" :fixed="true" :padding="false" :border="true" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">专家介绍页</text>
		</uni-nav-bar>
		<view class="body">
			<view class="expert flex-r ac" v-if="expert.expertId" @tap="$CHS.goExpertHome(expert.expertId)">
				<lazy-image class="expert-avatar" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
				<view class="expert-info flex-c">
					<view class="text-large">
						<text>{{expert.expertName}}</text>
					</view>
					<view class="text-info color-grey flex-r ac">
						<text v-if="expert.expertTag">{{expert.expertTag}}</text>
						<text v-if="expert.expertTag && (expert.hotContineTxt || expert.hitResultTxt)" space="ensp">{{' | '}}</text>
						<text v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
						<text v-else-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
					</view>
				</view>
				<button class="favbtn active-msg home">专家主页</button>
				<button class="favbtn active-msg" :class="{'nochat': expert.userIdentity != 1}" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)" v-if="expert.followStatus == 1">私信</button>
				<button class="favbtn active-fav" @tap.stop="favExpert(expert.expertId)" v-else>关注</button>
			</view>
			<view class="remark flex-c" v-if="remark">
				<view class="remark-text html-content" ref="content" v-html="remark" ></view>
				<image class="fav-img" src="@/public/images/expert/djlq.png" mode="aspectFit" @tap="favAndChat" v-if="expert.expertId && expert.userIdentity == 1"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//expertId: null,
				expert: {},
				remark: null,
			};
		},
		onLoad() {
			this.getExpertRemark()
			/* this.expertId = this.$Route.query.eid
			if(this.expertId){
				this.getRemarkByExpertId(this.expertId)
			}else{
				this.getExpertRemark()
			} */
		},
		methods: {
			//专家介绍，使用首页弹窗接口查询
			getExpertRemark() {
				this.$http.get({
					url: '/api/appUser/queryHomePagePopup'
				}).then((res)=>{
					if(res.success && res.result){
						this.remark = res.result.title
						this.expert = res.result.expertInfo
						//this.getExpertInfo(res.result.sourceFrom)
						
						this.imageList = this.getImgList(this.remark) //提取富文本内容的图片元素
						this.$nextTick(()=>{
							setTimeout(() => {//延迟添加图片点击监听
								this.addPreviewImage("content", this.imageList)
							}, 500)
						})
					}
				})
			},
			//专家介绍，使用指定专家ID查询
			getRemarkByExpertId(expertId) {
				this.$http.get({
					url: '/api/appUser/queryHomePagePopup'
				}).then((res)=>{
					if(res.success && res.result){
						this.remark = res.result.title
						this.expert = res.result.expertInfo
						this.expert.remark = ''
						this.getExpertInfo(res.result.sourceFrom)
						
						this.imageList = this.getImgList(this.remark) //提取富文本内容的图片元素
						this.$nextTick(()=>{
							setTimeout(() => {//延迟添加图片点击监听
								this.addPreviewImage("content", this.imageList)
							}, 500)
						})
					}else{
						this.$Router.replace({name: 'experthome', params: {eid: expertId, random: Date.now()}})
					}
				})
			},
			//专家信息
			getExpertInfo(expertId) {
				this.$http.get({
					url: '/api/user/article/exportInfo',
					data: {
						expertId
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.expert = data.result
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//关注专家
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){ //防止重复提交
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).then((res) => {
						this.$set(this.expert, 'followStatus', 1)
						this.$CHS.goChat(this.expert.expertId, this.expert.userIdentity)
					}).catch((err) => {
						console.log(err);
					}).finally(()=>{
						this.isFaving = null
					})
				}
			},
			//关注并私信
			favAndChat() {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(this.expert.followStatus == 1){
					this.$CHS.goChat(this.expert.expertId, this.expert.userIdentity)
				}else{
					this.favExpert(this.expert.expertId)
				}
			},
			//图片添加点击监听实现预览功能
			addPreviewImage(refId, imageList){
				let contentDom = this.$refs[refId]?.$el
				if(contentDom){
					contentDom.addEventListener('click', (e) => {
						if(e.target.tagName.toUpperCase() == "IMG" && e.target.width > 50){
							uni.previewImage({
								current: e.target.currentSrc,
								urls: imageList,
								loop: true
							});
						}
					});
				}
			},
			// 提取富文本图片元素
			getImgList(newValue) {
				let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
				let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
				let arr = newValue.match(imgReg); //筛选出所有的img
				let srcArr = [];
				if(arr){
					arr.forEach(item => {
						let src = item.match(srcReg);
						srcArr.push(src[1]);
					})
				}
				return srcArr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		margin: 20rpx 0;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		.expert{
			padding: 25rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			.expert-avatar{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
			.expert-info{
				flex: 2;
				margin-left: 20rpx;
				.text-info{
					margin-top: 17rpx;
				}
			}
			.favbtn{
				width: 120rpx;
				height: 60rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 0;
				margin: 0;
				line-height: 60rpx;
				&.active-fav{
					background: #0055FF;
					border: none;
				}
				&.active-msg{
					color: #0055FF;
					background: #FFF;
					border: 2rpx solid #0055FF;
					line-height: 56rpx;
				}
				&.home{
					width: 160rpx;
					margin-right: 20rpx;
				}
				&.nochat{
					border-color: #99BBFF;
					color: #99BBFF;
				}
			}
		}
		.remark{
			padding-top: 20rpx;
			.html-content{
				font-size: 28rpx;
				line-height: 42rpx;
			}
			.fav-img{
				margin: 20rpx 0 30rpx;
				width: 710rpx;
				height: 120rpx;
			}
		}
	}
</style>
